<template>
  <view class="section">
    <view class="section-header">
      <text class="section-title">我的相册</text>
      <text class="more" @click="onMoreClick">查看更多 ></text>
    </view>
    <view class="album-categories">
      <view class="category-item" v-for="(item, index) in categories" :key="index" @click="onCategoryClick(item)">
        <view class="category-icon" :style="{backgroundColor: item.color}">
          <uni-icons :type="item.icon" size="24" color="#fff"></uni-icons>
        </view>
        <text class="category-name">{{item.name}}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'AlbumCategories',
  props: {
    categories: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    onMoreClick() {
      this.$emit('more');
    },
    onCategoryClick(item) {
      this.$emit('select', item);
    }
  }
}
</script>

<style>
.section {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.more {
  font-size: 24rpx;
  color: #3a8838;
}

/* 相册分类样式 */
.album-categories {
  display: flex;
  justify-content: space-between;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 22%;
}

.category-icon {
  width: 90rpx;
  height: 90rpx;
  border-radius: 45rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10rpx;
}

.category-name {
  font-size: 24rpx;
  color: #333;
}
</style> 